<template>
  <div class="home">
    <div class="header"></div>
    <div class="content_panel">
      <!-- 内容区域 -->
      <div class="inner-content">
        <!-- 顶部扫一扫 -->
        <div class="tool-panel">
          <div @click="saoyisao()" class="saoyisao">
            <div style="height: 20px">
              <svg viewBox="0 0 200 200">
                <g>
                  <path
                    d="M0 0l45 0 0 15 -30 0 0 30 -15 0 0 -45zm15 155l0 30 30 0 0 15 -45 0 0 -45 15 0zm140 30l30 0 0 -30 15 0 0 45 -45 0 0 -15zm30 -140l0 -30 -30 0 0 -15 45 0 0 45 -15 0z"
                  />
                  <rect x="36" y="91" width="130" height="16" />
                </g>
              </svg>
            </div>
            <div style="font-size: 14px">扫一扫</div>
          </div>
          <div @click="fukuanma()" class="shoukuanma">
            <div style="height: 20px">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <path
                  d="M384 400.33l35.13-.33A29 29 0 00448 371.13V140.87A29 29 0 00419.13 112l-35.13.33M128 112l-36.8.33c-15.88 0-27.2 13-27.2 28.87v230.27c0 15.87 11.32 28.86 27.2 28.86L128 400M384 192v128M320 160v192M256 176v160M192 160v192M128 192v128"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
              </svg>
            </div>
            <div style="font-size: 14px">付款码</div>
          </div>
          <div class="qrcode" @click="shoukuanma()">
            <div style="height: 20px">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <rect x="336" y="336" width="80" height="80" rx="8" ry="8" />
                <rect x="272" y="272" width="64" height="64" rx="8" ry="8" />
                <rect x="416" y="416" width="64" height="64" rx="8" ry="8" />
                <rect x="432" y="272" width="48" height="48" rx="8" ry="8" />
                <rect x="272" y="432" width="48" height="48" rx="8" ry="8" />
                <rect x="336" y="96" width="80" height="80" rx="8" ry="8" />
                <rect
                  x="288"
                  y="48"
                  width="176"
                  height="176"
                  rx="16"
                  ry="16"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <rect x="96" y="96" width="80" height="80" rx="8" ry="8" />
                <rect
                  x="48"
                  y="48"
                  width="176"
                  height="176"
                  rx="16"
                  ry="16"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <rect x="96" y="336" width="80" height="80" rx="8" ry="8" />
                <rect
                  x="48"
                  y="288"
                  width="176"
                  height="176"
                  rx="16"
                  ry="16"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
              </svg>
            </div>
            <div style="font-size: 14px">收款码</div>
          </div>
          <div class="kabao">
            <div style="height: 20px">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ionicon"
                viewBox="0 0 512 512"
              >
                <rect
                  x="48"
                  y="96"
                  width="416"
                  height="320"
                  rx="56"
                  ry="56"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="32"
                />
                <path
                  fill="none"
                  stroke="currentColor"
                  stroke-linejoin="round"
                  stroke-width="60"
                  d="M48 192h416M128 300h48v20h-48z"
                />
              </svg>
            </div>
            <div style="font-size: 14px">卡包</div>
          </div>
        </div>
        <!-- 图片展示 -->
        <div class="img-list">
          <div style="color:#000">
            1111
          </div>
        </div>
      </div>
    </div>
    <ToolbBar></ToolbBar>
  </div>
</template>

<script>

import ToolbBar from '@/components/ToolBar.vue'

export default {
  name: "Home",
  components: {
	ToolbBar
  },
  data() {
    //定义组件内部属性
    return {
      img_src: 'require("@/assets/img/img-demo.jpeg")',
    };
  },
  methods: {
    saoyisao() {
      this.$router.push("/paymentsweep");
    },
    shoukuanma() {
      this.$router.push("/PayeeQrcode");
    },
    fukuanma() {
      this.$router.push("/paycodepage");
    },	
  },
};
</script>
<style scoped>
/* 顶部搜索栏 */
.header {
  position: fixed;
  top: 0;
  height: 60px;
  z-index: 999;
  background-color: #1678ff;
  color: #fff;
  width: 100%;
}

/* 中间内容框架 */
.content_panel {
  margin-top: 60px;
  margin-bottom: 70px;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: #000000;
}

.content_panel::-webkit-scrollbar {
  display: none;
}

.inner-content {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* 内容部分 */
.tool-panel {
  height: 70px;
  width: 100%;
  color: #ffffff;
  background-color: #1678ff;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tool-panel > div {
  width: 25%;
  text-align: center;
}
/* 扫一扫 */

.tool-panel .saoyisao svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

.saoyisao span {
  line-height: 20px;
  font-size: 14px;
}

/* 收款码 */

.shoukuanma span {
  display: block;
  font-size: 14px;
}

.tool-panel .shoukuanma svg {
  width: 30px;
  fill: #ffffff;
}

/* 二维码 */

.tool-panel .qrcode svg {
  width: 27px;
  fill: #ffffff;
}

.qrcode span {
  display: block;
  font-size: 14px;
}

/* 卡包 */

.tool-panel .kabao svg {
  width: 35px;
}

.kabao span {
  display: block;
  font-size: 14px;
}

.img-list {
  display: flex;
  flex-wrap: wrap;
}

.img-list > div {
  justify-content: center;
}

.img-list > div img {
  width: 180px;
  padding: 10px 10px;
}

/* 底部工具栏 */
.footer {
  position: fixed;
  bottom: 0;
  height: 70px;
  z-index: 999;
  background-color: #fafbff;
  width: 100%;
  border-top: solid 1px #e1e1e3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.footer > div {
  width: 25%;
  text-align: center;
}

.home {
  height: 70px;
  line-height: 70px;
  margin-top: 10px;
}

.home svg {
  width: 50px;
  height: 50px;
  fill: #1678ff;
}

.licai > div:first-child {
  margin-top: 10px;
}

.licai > div {
  line-height: 20px;
}

.licai svg {
  width: 30px;
  height: 30px;
}

.xiaoxi > div:first-child {
  margin-top: 10px;
}

.xiaoxi > div {
  line-height: 20px;
}

.xiaoxi svg {
  width: 30px;
  height: 30px;
}

.wode > div:first-child {
  margin-top: 10px;
}

.wode > div {
  line-height: 20px;
}

.wode svg {
  width: 30px;
  height: 30px;
}
</style>
